<template>
  <div
        class="side-menu fr"
        >
            <div class="clock">
                <h3 class="title">
                    <calendar></calendar>
                </h3>
                <div v-loading="loadingClock">
                    <time-canvas
                    :width="300"
                    :time="asideConfig.currentTime"
                    :height="70"
                    color="#00a2ff"
                    :x="30"
                    :y="18"
                    ></time-canvas>
                </div>
            </div>
            <Weather />
            <Card
            title="标签"
            :data="asideConfig.tagList"
            icon="tag"
            v-loading="loading"
            :total="asideConfig.tagTotal"
            :props="{
                key: 'articleNum',
                value: 'value'
            }"
            ></Card>
            <Card title="分类" v-loading="loading" icon="cate" :total="asideConfig.categoryTotal" :data="asideConfig.categoryList"></Card>
        </div>
</template>

<script>
import Card from '@/components/Card'
import TimeCanvas from '@/components/TimeCanvas'
import Calendar from '@/components/Calendar/calendar'
import Weather from '@/components/Weather'
export default {
    name: 'Aside',
    data () {
        return {
            loading: true,
            loadingClock: true,
            asideConfig: {}
        }
    },
    components: {
        Card,
        TimeCanvas,
        Calendar,
        Weather
    },
    computed: {
        // categoryList () {
        //     return this.$store.state.asideConfig.categoryList
        // },
        // tagList () {
        //     return this.$store.state.asideConfig.tagList
        // },
        // categoryTotal () {
        //     return this.$store.state.asideConfig.categoryTotal
        // },
        // tagTotal () {
        //     return this.$store.state.asideConfig.tagTotal
        // },
        // currentTime () {
        //     return this.$store.state.currentTime
        // }
    },
    mounted () {
        setTimeout(() => {
            this.loadingClock = false
        }, 300)
    },
    created () {
        this.init()
    },
    methods: {
        async init () {
            this.loading = true
            let [tagRes, categoryRes] = await Promise.all([this.$api.tag.get(), this.$api.category.get()])
            let asideConfig = {
                tagList: [],
                tagTotal: 0,
                categoryList: [],
                categoryTotal: 0
            }
            if ((tagRes && tagRes.success)) {
                asideConfig = {
                    ...asideConfig,
                    tagList: (tagRes.data && tagRes.data[0]) || [],
                    tagTotal: (tagRes.data && tagRes.data[1]) || 0
                }
            }
            if ((categoryRes && categoryRes.success)) {
                asideConfig = {
                    ...asideConfig,
                    categoryList: (categoryRes.data && categoryRes.data[0]),
                    categoryTotal: (categoryRes.data && categoryRes.data[1]) || 0
                }
            }
            this.asideConfig = asideConfig
            this.loading = false
        }
    }
}
</script>

<style>

</style>
